<template>
  <div class="sachertorteBandShop">
    <c-title :hide="false" :text="band.title"></c-title>
    <div class="bandDetail">
      <div class="bandTop">
        <img :src="band.logo" alt="" />
        <div class="title">{{ band.title }}</div>
      </div>
      <div class="bandConten" v-html="band.brief_introduction" v-if="band.brief_introduction"></div>
      <div class="nav">
        <div class="left" @click="tapChange(0)" :class="[active == 0 ? 'isOn' : '']">商品列表</div>
        <div class="right" @click="tapChange(1)" :class="[active == 1 ? 'isOn' : '']">门店列表</div>
      </div>
    </div>
    <!--筛选-->
    <template v-if="active == 0">
      <div class="screen-content flex-a-c flex-j-sb">
        <div class="popularity" :class="query && query.order_field === 'popularity' ? 'on' : ''" @click="popularity">人气</div>
        <div class="flex-a-c salesOn" @click="salesClick(query.order_by)">
          <span :class="query.order_field === 'show_sales' ? 'on' : ''">销量</span>
          <div class="flex-a-c sort">
            <span
              class="iconfont icon-member-top"
              v-if="query.order_by === 'asc' && query.order_field === 'show_sales'"
              :class="query.order_by === 'asc' && query.order_field === 'show_sales' ? 'on' : ''"
            >
            </span>
            <span
              class="iconfont icon-member-bottom "
              v-if="query.order_by === 'desc' && query.order_field === 'show_sales'"
              :class="query.order_by === 'desc' && query.order_field === 'show_sales' ? 'on' : ''"
            >
            </span>
          </div>
        </div>
        <div class="flex-a-c" @click="priceClick(query.order_by)">
          <span :class="query.order_field === 'price' ? 'on' : ''">价格</span>
          <div class="flex-a-c sort">
            <span
              class="iconfont icon-member-top"
              v-if="query.order_by === 'asc' && query.order_field === 'price'"
              :class="query.order_by === 'asc' && query.order_field === 'price' ? 'on' : ''"
            ></span>
            <span
              class="iconfont icon-member-bottom "
              v-if="query.order_by === 'desc' && query.order_field === 'price'"
              :class="query.order_by === 'desc' && query.order_field === 'price' ? 'on' : ''"
            ></span>
          </div>
        </div>
        <div class="flex-a-c" @click="screeningPopup">
          <span>筛选</span>
          <span class="iconfont sort icon-fontclass-shaixuan"></span>
        </div>
      </div>
      <!--筛选弹窗-->
      <screen-popup
        :screenShow="screenShow"
        :cakeType="cakeType"
        :getBrand="getBrand"
        :priceSnacks="priceSnacks"
        :category="categorys"
        :cakePriceArr="cakePriceArr"
        @screenClick="screenClick"
        @screenClose="screenClose"
      >
      </screen-popup>
      <!--搜索商品列表-->
      <div class="goods-list" v-if="goodsList.length > 0">
        <block v-for="item in goodsList" :key="item.id">
          <goods-item :purchaseItem="item" :city="query.city"></goods-item>
        </block>
      </div>
    </template>
    <template v-else>
      <div class="storeList" v-for="item in BandStore" :key="item.id" @click="tapStoreList(item.id,item)">
        <div class="storeName">
          {{item.shop_name}}
          <!-- <div class="saleNum">销量:12312</div> -->
        </div>
        <div class="phone">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fsachertorte%2F%E7%94%B5%E8%AF%9D_phone-telephone%402x.png" alt="" />
          <div>{{item.phone}}</div>
        </div>
        <div class="phone" style="justify-content: space-between;">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fsachertorte%2Flocal%20(1)%402x.png" alt="" />
          <div style="flex: 1; text-align: left;">{{item.address}}</div>
          <div class="distance">{{setDistance(item.distance)}}</div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import screenPopup from "./sachertorteComm/screenPopup";
import goodsItem from "./sachertorteComm/goodsItem";
import { scrollMixin } from "utils/mixin";
export default {
  components: {
    screenPopup,
    goodsItem
  },
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      band: [],
      active: 0,
      query: {
        page: 1,
        city: "",
        order_field: "",
        order_by: "",
        cake_type: "",
        cake_price_max: "",
        cake_price_min: "",
        snacks_price_max: "",
        snacks_price_min: ""
      },
      screenShow: false,
      cakeType: [
        {
          type: "",
          text: "全部"
        },
        {
          type: 1,
          text: "4-5人食"
        },
        {
          type: 2,
          text: "6-9人"
        },
        {
          type: 3,
          text: "10-12人"
        },
        {
          type: 4,
          text: "12人以上"
        }
      ],
      priceSnacks: [
        {
          type: ["", ""],
          text: "全部"
        },
        {
          type: [20, 99],
          text: "20-99"
        },
        {
          type: [100, 199],
          text: "100-199"
        },
        {
          type: [199, ""],
          text: "199以上"
        }
      ],
      brandsId: "",
      categorysId: "",
      goodsList: [],
      BandStore: [],
      point: {}
    };
  },
  activated() {
    this.getData();
    if(this.$route.query.city) {
      this.query.city = this.$route.query.city;
    }
    this.query.page = 1;
    this.active = 0;
    this.fun
      .getLocation()
      .then(res => {
        console.log(res);
        this.point = res.point;
        this.locationStatus = true;
        if (this.query.city === "") {
          this.query.city = res.city;
        }
        this.getBrandsData();
        this.goodsByList();
      })
      .catch(err => {
        console.log(err);
        this.getBrandsData();
        this.goodsByList();
        this.locationStatus = false;
      });
      this.brandsId = this.$route.params.brand_id;
  },
  mounted() {
    this.getBrandsData();
    this.categorysList();
  },
  methods: {
    tapStoreList(id,item){
      let query = { 
        city: this.query.city,
        store_id: id,
      }
      this.$router.push(this.fun.getUrl("sachertorteSearch", {}, query));
    },
    goodsByList() {
      let urlStr = "plugin.yz-supply-cake.frontend.goods.goods.getGoodsList";
      urlStr += `&search[brand_id]=${this.brandsId}`;
      urlStr += `&search[category]=${this.categorysId}`;
      // urlStr += `&yz_supply_cake_store_id=${this.$route.params.brand_id}`;
      $http.get(urlStr, this.query, "正在获取").then(
        response => {
          if (response.result == 1) {
            let res = response.data;
            this.isLoadMore = true;
            this.total_page = res.last_page;
            if (!this.total_page) {
              this.page = 0;
            }
            this.goodsList = res.data;
          } else {
            this.query.page = this.query.page - 1;
            this.isLoadMore = false;
            this.$dialog.alert({ message: response.msg });
          }
        },
        function(response) {
          // console.log(response);
          // error callback
        }
      );
    },
    setDistance(distance) {
      // if (distance >= 1000) {
      //   return Number(distance / 1000).toFixed(2) + 'km'
      // } else {
      //   return Number(distance).toFixed(2) + 'm'
      // }
      return Number(distance).toFixed(2)+'km'
    },
    getBandStore() {
      let json = { 
        brand_id: this.$route.params.brand_id,
        lat:this.point.lat?this.point.lat:'',
        lng:this.point.lng?this.point.lng:''
      };
      $http.get("plugin.yz-supply-cake.frontend.index.index.getStoreByBrandId", json, "正在获取").then(
        response => {
          if (response.result == 1) {
            console.log(response.data);
            this.BandStore = response.data.data;
            this.total_page = response.data.last_page;
            this.isLoadMore = true;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function(response) {
          // console.log(response);
          // error callback
        }
      );
    },
    //获取更多数据
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.query.page >= this.total_page) {
        return;
      } else {
        this.query.page = this.query.page + 1;
        if(this.active == 0){
          let urlStr = "plugin.yz-supply-cake.frontend.goods.goods.getGoodsList";
          urlStr += `&search[brand_id]=${this.brandsId}`;
          urlStr += `&search[category]=${this.categorysId}`;
          // urlStr += `&yz_supply_cake_store_id=${this.$route.params.brand_id}`;
          $http.post(urlStr, this.query, "加载中").then(
            res => {
              this.isLoadMore = true;
              if (res.result === 1) {
                let myData = res.data.data;
                this.goodsList = [...this.goodsList, ...myData]; //数组拼接
              } else {
                this.query.page = this.query.page - 1;
                this.isLoadMore = false;
              }
            },
            function(response) {
              console.log("response", response);
              // error callback
            }
          );
        }else{
          let urlStr = "plugin.yz-supply-cake.frontend.index.index.getStoreByBrandId";
          let json = { 
            brand_id: this.$route.params.brand_id,
            lat:this.point.lat?this.point.lat:'',
            lng:this.point.lng?this.point.lng:'',
            page:this.query.page
          };
          $http.post(urlStr, json, "加载中").then(
            res => {
              this.isLoadMore = true;
              if (res.result === 1) {
                let myData = res.data.data;
                this.BandStore = [...this.BandStore, ...myData]; //数组拼接
              } else {
                this.query.page = this.query.page - 1;
                this.isLoadMore = false;
              }
            },
            function(response) {
              console.log("response", response);
              // error callback
            }
          );
        }
        
      }
    },
    categorysList() {
      $http.get("plugin.yz-supply-cake.frontend.index.index.getCategorys", {}, "正在获取").then(
        response => {
          if (response.result == 1) {
            let res = response.data;
            let list = res;
            this.categorys = list;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function(response) {
          // console.log(response);
          // error callback
        }
      );
    },
    getBrandsData() {
      let query = {
        city: this.query.city
      };
      $http.get("plugin.yz-supply-cake.frontend.goods.goods.getBrand", query, "正在获取").then(
        response => {
          if (response.result == 1) {
            let res = response.data;
            this.getBrand = res;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function(response) {
          // console.log(response);
          // error callback
        }
      );
    },
    screenClose() {
      this.screenShow = false;
    },
    screenClick(data) {
      console.log(data);
      //筛选完成
      let { brandValue, cakeValue, categoryValue, priceValue, cakePirceValue } = data;
      this.screenShow = false;
      this.isLoadMore = true;
      this.brandsId = brandValue;
      console.log(this.brandsId);
      this.categorysId = categoryValue;
      this.query.cake_type = cakeValue;
      this.query.page = 1;
      this.query.cake_price_min = cakePirceValue[0];
      this.query.cake_price_max = cakePirceValue[1];
      this.query.snacks_price_min = priceValue[0];
      this.query.snacks_price_max = priceValue[1];
      this.goodsByList();
    },
    screeningPopup() {
      this.screenShow = true;
      console.log(this.screenShow);
    },
    popularity() {
      //选择人气
      this.query.page = 1;
      this.query.order_by = "";
      this.query.order_field = "popularity";
      this.isLoadMore = true;
      this.goodsByList();
    },
    priceClick(sort) {
      //选择价格
      let sortValue = "asc";
      this.sortSwicth(sort, sortValue, "price"); //处理判断倒序，正序
    },
    tapChange(key) {
      this.active = key;
      this.query.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
      if (key == 1) {
        this.getBandStore();
      } else {
        this.goodsByList();
      }
    },
    salesClick(sort) {
      let sortValue = "asc";
      this.sortSwicth(sort, sortValue, "show_sales"); //处理判断倒序，正序
    },
    sortSwicth(sort, sortValue, field) {
      switch (sort) {
        case "asc":
          sortValue = "desc";
          break;
        case "desc":
          sortValue = "asc";
          break;
      }
      this.query.page = 1;
      this.query.order_by = sortValue;
      this.query.order_field = field;
      this.isLoadMore = true;
      console.log(this.query);
      this.goodsByList();
    },
    getData() {
      $http.get("plugin.yz-supply-cake.frontend.goods.goods.getBrandDetails", { brand_id: this.$route.params.brand_id }, "正在获取").then(
        response => {
          if (response.result == 1) {
            console.log(response);
            this.band = response.data;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function(response) {
          // console.log(response);
          // error callback
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.bandDetail {
  margin: 0.75rem;
  margin-bottom: 0;
  padding: 0.75rem 1.03rem 0 0.63rem;
  background: #fff;
  border-radius: 0.5rem;

  .bandConten {
    text-align: left;
    margin-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e7e7e7;
  }

  .bandTop {
    display: flex;
    align-items: center;

    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      margin: 0;
    }

    .title {
      flex: 1;
      margin-left: 0.63rem;
      text-align: left;
    }
  }

  .nav {
    height: 2.75rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.88rem;
    color: #333;

    .isOn::after {
      content: "";
      position: absolute;
      bottom: -0.38rem;
      left: 0;
      height: 0.19rem;
      border-radius: 0.19rem;
      background: #e32323;
      width: 100%;
    }

    .isOn {
      color: #e32323;
    }

    .left,
    .right {
      position: relative;
      line-height: 1.25rem;
    }
  }
}

.screen-content {
  margin-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1.75rem 0.75rem 2.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 0.75rem;

  .sort {
    flex-direction: column;
    margin: 0 0 0 0.25rem;
  }
}

.on {
  color: #e32323;
}

.salesOn {
  text {
    font-size: 0.75rem;
    line-height: 1.0625rem;
  }

  .iconfont {
    line-height: 0.75rem;
  }
}

.sort .icon-member-top,
.icon-member-bottom {
  font-size: 0.75rem;
  line-height: 0.75rem;
}

/* 搜索订单列表 */
.goods-list {
  margin: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-radius: 0.5rem 0.5rem 00 0;

  .goods-item {
    margin-bottom: 0.5rem;
    background-color: #fff;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    width: 10.69rem;
  }
}
// 门店列表
.storeList {
  padding: 0.75rem;
  margin: 0.75rem;
  margin-bottom: 0;
  background: #fff;

  .storeName {
    font-size: 0.88rem;
    display: flex;
    align-items: center;

    .saleNum {
      font-size: 0.75rem;
      color: #e32323;
      margin-left: 0.325rem;
    }
  }

  .phone {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.25rem;

    img {
      width: 0.75rem;
      height: 0.75rem;
      margin: 0;
      margin-right: 0.25rem;
    }
  }
}
</style>
